<template>
    <view class="page" :style="themeColor">
        <view class="swiper-box">
            <view class="bg"></view>
            <swiper class="swiper" :autoplay="true">
                <block v-for="(item, index) in AdvImgList" :key="index">
                    <swiper-item class="swiper-item">
                        <image class="banner-img" :src="easyGetImgUrl(item)" mode="widthFix"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <view class="content">
            <view class="tab-box" v-if="CategoryList.length > 1">
                <view
                    :class="activeIdx == index ? 'tab-item-active' : 'tab-item'"
                    v-for="(item, index) in CategoryList"
                    :key="index"
                    @click="changeTab(index)"
                    >{{ item.CateGoryImg }}</view
                >
            </view>
        </view>
        <view v-for="(item, index) in CategoryList" :key="index" class="box-height">
            <view class="flex" v-if="activeIdx == index" :style="{ height: height }">
                <view class="flex-left" v-if="item.CateGoryName.length > 1">
                    <view
                        :class="
                            item.ActiveCateGoryName == ite ? 'flex-left-item flex-left-item-active' : 'flex-left-item'
                        "
                        v-for="(ite, idx) in item.CateGoryName"
                        :key="idx"
                        @click="changeCategory(ite, index)"
                        >{{ ite }}
                    </view>
                </view>
                <view :class="item.CateGoryName.length > 1 ? 'flex-right' : 'flex-right flex-right-noCateGory'">
                    <view class="flex-right-b">
                        <view
                            class="item-box"
                            v-if="item.ActiveCateGoryName == ite.CateGoryName || item.ActiveCateGoryName == '全部'"
                            v-for="(ite, idx) in item.AppList"
                            :key="idx"
                            @click="gotoMiniProgram(ite)">
                            <view>
                                <image class="item-logo" :src="easyGetImgUrl(ite.Banner)"></image>
                                <view class="item-name">{{ ite.AppName }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="bottom-box">
                        <text class="bottom-text">我也可以提供相关服务：</text>
                        <text class="text-color" @click="gotoShopIn">申请入驻 ></text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { GetMiniappList } from "@/service/api/miniApp.js"
import { getProductDisplay, getInitWebInfo, getInitWebInfoUp } from "@/utils/appInit.js"
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { getDomain } from "@/utils/appUrls.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    data() {
        return {
            activeIdx: 0,
            AdvImgList: [],
            CategoryList: [],
            ShareTitle: "",
            ShareImg: "",
            height: "",
            initCategoryId: 0,
        }
    },
    onLoad(options) {
        this.initCategoryId = options.categoryId || 0
        this.init()
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        getListHeight() {
            //获取商品高度
            setTimeout(() => {
                getElementHeight(this, ".box-height", (e) => {
                    this.height = e + "px"
                })
            }, 1000)
        },
        init() {
            let domain = getDomain()
            getInitWebInfo(domain, this)
            let webInfo = storage.getCache("webInfo")
            if (webInfo) {
                if (!webInfo.WebDomain) {
                    webInfo.WebDomain = config.domain
                    storage.setCache("webInfo", webInfo)
                }
                getInitWebInfoUp(webInfo.WebDomain, this)

                this.goNext()
                return
            }
            let selectShop = storage.getCache("selectShop")
            if (selectShop) {
                getInitWebInfo(selectShop.MobileDomain, this)
            } else {
                getInitWebInfo(config.domain, this)
            }
            setTimeout((e) => {
                this.goNext()
            }, 500)
        },
        goNext() {
            GetMiniappList().then((res) => {
                if (res.State == 1) {
                    let info = res.Data
                    if (info.PageTitle) {
                        uni.setNavigationBarTitle({
                            title: info.PageTitle,
                        })
                    }
                    if (info.CategoryList && info.CategoryList.length > 0) {
                        info.CategoryList.forEach((item, index) => {
                            if (item.CateGoryName && item.CateGoryName.length > 0) {
                                item.ActiveCateGoryName = item.CateGoryName[0]
                            }
                            if (item.CategoryId == this.initCategoryId) {
                                this.activeIdx = index
                            }
                        })
                    }
                    this.AdvImgList = info.AdvImgList
                    this.CategoryList = info.CategoryList
                    this.ShareTitle = info.ShareTitle
                    if (info.ShareImg) {
                        this.ShareImg = this.easyGetImgUrl(info.ShareImg)
                    } else {
                        this.ShareImg = ""
                    }
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        changeTab(index) {
            this.activeIdx = index
        },
        gotoShopIn() {
            this.easyGoTo("/pages_me/packet/miniApp/shopIn")
        },
        changeCategory(name, index) {
            this.CategoryList[index].ActiveCateGoryName = name
        },
        gotoMiniProgram(item) {
            this.easyGoTo("/pages_me/packet/miniApp/miniProgramDetail?id=" + item.ID)
        },
    },
    onShareAppMessage() {
        if (this.ShareTitle) {
            return {
                title: this.ShareTitle,
                imageUrl: this.ShareImg,
            }
        }
    },
    onShareTimeline() {
        if (this.ShareTitle) {
            return {
                title: this.ShareTitle,
                imageUrl: this.ShareImg,
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.swiper-box {
    position: relative;
    padding-top: 24rpx;
}

.bg {
    position: absolute;
    height: 610rpx;
    width: 100%;
    background: linear-gradient(180deg, #efefef 0%, #ffffff 100%);
    // top: -24rpx;
    top: 0;
    left: 0;
}

.swiper {
    height: 351rpx;
    margin: 0 24rpx;
    border-radius: 32rpx;
    overflow: hidden;
}

.swiper-item {
    border-radius: 32rpx;
}

.banner-img {
    width: 100%;
}

.content {
    margin: 24rpx;
    position: relative;
    margin-bottom: 0;
}

.tab-box {
    display: flex;
    align-items: flex-end;
    position: relative;
    padding-bottom: 34rpx;
}

.tab-box:after {
    content: "";
    position: absolute;
    height: 34rpx;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
}

.tab-item {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 30rpx;
    background: #f1f9fa;
    height: 100rpx;
    line-height: 100rpx;
    position: relative;
}

.tab-item:first-child {
    border-radius: 32rpx 0 0 0;
}

.tab-item:last-child {
    border-radius: 0 32rpx 0 0;
}

.tab-item-active {
    color: #2993a2;
    font-size: 34rpx;
    background: #fff;
    position: relative;
    height: 118rpx;
    line-height: 118rpx;
    text-align: center;
    flex: 1.5;
    border-radius: 32rpx 32rpx 0 0;
}

.tab-item-active:after {
    content: "";
    position: absolute;
    height: 4rpx;
    width: 108rpx;
    bottom: 16rpx;
    background: #2993a2;
    left: calc(50% - 54rpx);
}

.category-swiper {
    height: auto;
}

.category-swiper-item {
    height: auto;
}

.categoryList-box {
    position: relative;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-left {
    background: #efefef;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.flex-left-item {
    padding: 34rpx 10rpx;
    background: #efefef;
    text-align: center;
    font-size: 28rpx;
    line-height: 40rpx;
    box-sizing: border-box;
    max-width: 250rpx;
    min-width: 180rpx;
    color: #666;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
    position: relative;
}

.flex-left-item-active {
    font-weight: 500;
    color: #333333;
    z-index: 2;
}

.flex-left-item-active:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 110%;
    height: 110%;
    background: #fff;
    border-radius: 0 16rpx 16rpx 0;
    box-shadow: 4rpx 0px 8rpx 0px rgba(0, 0, 0, 0.1);
    left: 0;
    top: -5%;
}

.flex-right {
    background: #fff;
    flex: 1;
    height: 100%;
    // overflow-y: auto;
    box-sizing: border-box;
    padding-bottom: 120rpx;
    position: relative;
}

.flex-right-b {
    // display: flex;
    // flex-wrap: wrap;
    height: 100%;
    overflow-y: auto;
}

.item-box {
    width: 50%;
    float: left;
    position: relative;
    text-align: center;
    padding: 16rpx;
    box-sizing: border-box;
}

.flex-right-noCateGory .item-box {
    width: 33.3%;
}

.item-logo {
    width: 144rpx;
    height: 144rpx;
    border-radius: 36rpx;
    box-shadow: 0px 12rpx 12rpx 0px rgba(0, 0, 0, 0.1);
}

.item-name {
    text-align: center;
    font-size: 28rpx;
    color: #333;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bottom-box {
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #fff;
}

.bottom-text,
.text-color {
    font-size: 28rpx;
    color: #333;
}

.text-color {
    color: #0091ff;
}
</style>
